<template>
  <div>
    <div class="bg">
      <div class="bg2"></div>
      <div class="content">
        <div style="text-align:center;color:white;font-size:20px">浩物安全管理系统</div>
        <div class="longin-boder">
          <input class="input" type="text" v-model="userphone" placeholder="请输入手机号" />
        </div>
        <div class="longin-boder">
          <input class="input" type="password" v-model="password" placeholder="请输入登录密码" />
        </div>
        <van-button
          class="button"
          square
          type="primary"
          @click="login()"
          color="#DCAB2E"
        >登&nbsp;&nbsp;录</van-button>
      </div>
      <div
        style="text-align:center;color:white;font-size:14px;margin-top: 20px;font-weight:bold" @click="toForgetPassword()"
      >忘记密码？</div>
    </div>
    <div class="bottomIcon">
      <img src="../../assets/images/login_icon.png" alt style="height: 24px;width: 119px;" />
    </div>
    <div class="bottomBg">© 天津市浩物机电汽车贸易有限公司 版权所有</div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Api, __tenant } from "../../api/api_config";
import Token from "../../model/token";

export default {
  data() {
    return {
      userphone: "huifenghangzongjingli",
      password: "Tianbang@18718"
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {},
    login() {
      let token = new Token();
      token.username = this.userphone;
      token.password = this.password;

      let data = new FormData();
      data.append("grant_type", token.grant_type);
      data.append("scope", token.scope);
      data.append("client_id", token.client_id);
      data.append("client_secret", token.client_secret);
      data.append("username", token.username);
      data.append("password", token.password);

      let that = this;
      this.$axios({
        method: Api.Login.token.method,
        url: Api.Login.token.url,
        data: data,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          __tenant: __tenant,
        },
      })
        .then(function (response) {
          that.$store.state.token =
            response.data.token_type + " " + response.data.access_token;
            that.getConfiguration();
            // that.$router.push("/frame");
        })
        .catch(function (error) {
          console.log(error);
        });
      
    },
    getConfiguration() {

      let that = this;
      this.$axios({
        method: Api.AbpApplicationConfiguration.get_application_configuration.method,
        url: Api.AbpApplicationConfiguration.get_application_configuration.url,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          __tenant: __tenant,
        },
      })
        .then(function (response) {
          that.$store.state.configuration = response.data;
          that.$store.state.tab_show = true;
          that.$router.push("/frame");
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    toForgetPassword() {

      if (this.userphone === "") {
        Toast("请您输入账户找回密码");
        return
      }
      let that = this;
      this.$axios({
        method: Api.User.existing.method,
        url: Api.User.existing.url + '?name=' + this.userphone,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          __tenant: __tenant,
        },
      })
        .then(function (response) {
          console.log(response)
          if (response.data.exist === 1) {
            that.$store.state.account = that.userphone
            that.$router.push("/forgetPassword");
          } else {
            Toast("您输入的账号不存在");
          }

        })
        .catch(function (error) {
          console.log(error);
        });
      // 验证账户是否存在

    }
  },
};
</script>

<style scoped>
.bg {
  overflow: hidden;
  height: 100%;
  position: absolute;
  z-index: -2;
  left: 0px;
  width: 100%;
  top: 0px;
  background: url("../../assets/images/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.content {
  width: 100%;
  margin-top: 100px;
  text-align: center;
}
.longin-boder {
  width: 80%;
  height: 40px;
  margin-top: 10px;
  margin-left: 10%;
  line-height: 40px;
  text-align: center;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #efefef;
  margin-top: 20px;
}
.image {
  width: 10%;
  margin-top: 5px;
  float: left;
  text-align: right;
}
.input {
  width: 80%;
  float: left;
  margin-left: 5%;
  height: 37px;
  line-height: 37px;
  border: 0px;
  color: #333333;
  font-size: 16px;
  background-color: #efefef;
}

.button {
  margin-top: 20px;
  height: 40px;
  width: 80%;
  font-size: 16px;
  line-height: 38px;
  border-radius: 5px;
  color: #ffffff;
  background-color: #dcab2e;
}

.button:active {
  background-color: rgb(247, 196, 67);
}

.bg2 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 35%;
  background: url("../../assets/images/login_bg_2.png");
}

.bottomBg {
  width: 100%;
  position: absolute;
  bottom: 20px;
  text-align: center;
  font-size: 10px;
  color: #393939;
}

.bottomIcon {
  border-width: 0px;
  position: absolute;
  width: 100%;
  bottom: 40px;
  text-align: center;
}
</style>
